//
// Copyright (c) Microsoft. All rights reserved.
// Licensed under the MIT license.
//
// Microsoft Bot Framework: http://botframework.com
//
// Bot Framework Emulator Github:
// https://github.com/Microsoft/BotFramwork-Emulator
//
// Copyright (c) Microsoft Corporation
// All rights reserved.
//
// MIT License:
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED ""AS IS"", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//

:export { bubbleContentColor: var(--bubble-text-color); }
:export { bubbleBackground: var(--webchat-user-bubble-bg); }

.chat {
  background-color: white;
  display: flex;
  position: relative;
  height: calc(100% - 36px); // 36px is the height of the <header> in chatPanel.tsx
  width: 100%;
  user-select: text;

  // Webchat does not use box-sizing and 'border-box' results in
  // UI issues. (noticed with the sendbox buttons)
  div:not(.disconnected) {
    box-sizing: unset;
  }

  // the user-agent stylesheet sets background color to white.
  & > div > div[role=form] input {
    background-color: transparent;
  }

  & > * {
    width: 100%;
  }

  & li {
    margin-bottom: 0;

    &:last-of-type {
      margin-bottom: 8px;
    }
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--webchat-scrollbar-color);
  }
}

.chat-activity {
  position: relative;
  border: 1px solid transparent;
  cursor: pointer;
  margin: 0 16px;
  padding: 4px;
  transition: color .1s linear, background .1s linear;

  & > * {
    margin: 0;
  }

  :global .bubble p {
    font-family: var(--default-font-family);
    font-weight: var(--webchat-bubble-text-weight);
  }
}

.hidden {
  pointer-events: none;
  visibility: hidden;
}

.replay-bubble {
  display: block;
  text-align: right;
}

.selected-activity :global .bubble,
.selected-activity :global .ac-container,
.selected-activity :global .ac-textBlock {
  background: var(--webchat-selected-activity-bg);
  color: var(--webchat-selected-activity-text) !important;
}

.disconnected {
  align-items: flex-start;
  background-color: var(--webchat-bg);
  color: var(--webchat-bubble-text);
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  box-sizing: border-box;
}

button[class^="webchat--css"] {
  &:focus {
    outline: 1px solid var(--dialog-link-focus-color) !important;
    margin: 2px;
    outline-offset: 1px !important;

    &::after {
      border: var(--p-button-border-focus) !important;
    }
  }
}

input[class^="webchat__send"] {
  &:focus {
    outline: 1px solid var(--dialog-link-focus-color) !important;
    margin: 2px;
    outline-offset: 1px !important;

    &::after {
      border: var(--p-button-border-focus) !important;
    }
  }
}

button.bot-state-object {
  cursor: pointer;
  margin: 5px 16px;
  min-width: initial;
  background: transparent;
  color: var(--bot-state-button-color);
  font-weight: bold;

  &:active {
    color: var(--bot-state-button-color-focus);
  }

  &[aria-selected="false"] {
    color: var(--bot-state-button-color);
  }

  &:hover:not([disabled]), &:focus {
    background: transparent;
    color: var(--bot-state-button-color-focus);
  }

  &[aria-selected="true"] {
    color: var(--bot-state-button-color-focus);

    &[data-diff-indicator-index='0'] {
      color: var(--bot-state-button-color);

      &:before {
        background: var(--bot-state-diff-indicator-color);
      }
    }

    &:before {
      content: '';
      position: absolute;
      background: var(--split-button-icon-color);
      border-radius: 7px;
      width: 7px;
      height: 7px;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      left: -10px;
    }
  }
}
